<template>
    <div>
        <div class="row-header">
            <!--查询条件-->
            <el-form :model="form" :rules="rules" ref="form" label-width="50px" style="width: 100%; margin-top: 20px;" :inline="true">
                <el-form-item label=" " prop="passage">
                    <el-select :disabled="formDisabled" filterable v-model="form.passage" placeholder="请选择通道">
                        <el-option
                                v-for="item in passageOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label=" " prop="startNo">
                    <el-input :disabled="formDisabled" placeholder="请输入起始卡号" v-model.trim="form.startNo" ref="startNo" style="width: 160px" maxlength="20"></el-input>
                    <span style="margin: 0 10px;">--</span>
                    <el-input v-model.trim="form.endNo" placeholder="请输入结束卡号" ref="endNo" style="width: 160px" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label=" " prop="balancePackage">
                    <el-select filterable :disabled="formDisabled" v-model="form.balancePackage" placeholder="请选择余额套餐" >
                        <el-option
                                v-for="item in balancePackageOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label=" " prop="mealType">
                    <el-select :disabled="formDisabled" filterable v-model="form.mealType" placeholder="请选择套餐大类" >
                        <el-option
                                v-for="item in mealTypeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label=" " prop="cardsNo">
                    <span style="margin-right: 20px;font-weight: bold; color:#555;">不规则卡号: </span>
                    <button type="button" :disabled="formDisabled" class="btn_look" v-show="form.cardsNo" @click="dialogFormVisible = true"><i class="el-icon-view"></i> 点击查看卡号</button>
                    <button type="button" :disabled="formDisabled" class="btn_input" v-show="!form.cardsNo" @click=" dialogFormVisible = true"><i class="el-icon-edit-outline"></i> 点击输入卡号</button>
                </el-form-item>
            </el-form>
            <div class="row-form-btn">
                <el-button type="shenda" size="mini" icon="el-icon-search" @click="searchForm('form')">查询</el-button>
                <el-button type="shenda" size="mini" icon="el-icon-refresh" @click="resetForm('form')">重置</el-button>
            </div>
        </div>
        <div class="split-line"></div>
        <div class="row-main">
            <el-button type="shenda" icon="el-icon-back" size="small" @click="toBack" >返回</el-button>
            <el-button type="shenda" icon="el-icon-refresh" size="small" @click="current=1,initData()" >刷新数据</el-button>
            <el-button type="shenda" size="small" icon="el-icon-refresh-right" @click="doSomeAct('REDUCT_CARD','全部还原')" v-if="tableData.length>0&&tableData">全部还原</el-button>
            <el-button type="shenda" size="small" icon="el-icon-delete" @click="doSomeAct('DELETE_CARD','全部清空')" v-if="tableData.length>0&&tableData">全部清空</el-button>
            <el-button type="success"  size="small" icon="el-icon-view" @click="reviewAllData" :disabled="showAllBtn&&id" v-if="id">切换全部回收记录</el-button>
            <el-button type="warning"  size="small" icon="el-icon-tickets" @click="reviewAllData" :disabled="!showAllBtn&&id" v-if="id">查看 当前 回收记录</el-button>
            <el-table :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }"
                      :data="tableData" class="row-main-table"
                      ref="table" tooltip-effect="dark"
                      v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中"
                      element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
                <el-table-column prop="cardNumber" label="卡号" align="center" :fixed="$store.state.app.screenWidth<992?true:false" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
                <el-table-column prop="iccid" label="iccid" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
                <el-table-column prop="imsi" label="imsi" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
                <el-table-column prop="msisdn" label="msisdn" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
                <el-table-column prop="setMealHeadName" label="套餐组" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
                <el-table-column prop="balanceHeadName" label="余额组" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
                <el-table-column prop="accountName" label="通道名称" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
                <el-table-column prop="dictChannelCardStatusName" label="状态" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
                <el-table-column label="操作" align="center" :width="$store.state.app.screenWidth<992?'150px':'auto'">
                    <template slot-scope="scope">
                        <el-dropdown trigger="click">
                            <div>
                                <svg-icon class="el-dropdown-link" icon-class="operation"></svg-icon>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>
                                    <el-button class="operation" style="width: 100%;" @click="clearItem(scope.row,'DELETE_CARD')">清空</el-button>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <el-button class="operation" @click="revertItem(scope.row,'REDUCT_CARD')">还原</el-button>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <div :style="{'overflow':$store.state.app.screenWidth<992?'scroll':'auto'}">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        class="row-main-pager"
                        :current-page.sync="current"
                        :page-size="pageSize"
                        :total="total"
                        layout="total, sizes, prev, pager, next, jumper"
                        background></el-pagination>
            </div>
            <!--不规则卡号 onkeyup="value=value.replace(/[^\w||\d||\n]/g,'')" -->
            <el-dialog title="卡号（一行一个）" :visible.sync="dialogFormVisible" width="$store.state.app.screenWidth<600?'100%':'700px'" >
                <el-row>
                    <el-input type="textarea" v-model="form.cardsNo" style="width: 100%" :rows="10" placeholder="请输入卡号，每行一个" onkeyup="value=value.replace(/[^\w||\d||\n]/g,'')"></el-input>
                </el-row>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveCardsNo">确 定</el-button>
                </div>
            </el-dialog>
            <!--   全部清空 or 全部还原   -->
            <el-dialog :title="typeName" :visible.sync="showSomeActDialog" :width="$store.state.app.screenWidth<700?'100%':'700px'" center>
                <el-row style="width: 80%;margin: 10px 10%;line-height: 40px">{{showText}}</el-row>
                <el-form :model="form" ref="form">
                    <el-form-item label="操作备注" prop="userRemark" >
                        <el-input v-model="form.remark" type="textarea" :rows="4" ></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
          <el-button @click="showSomeActDialog = false">取 消</el-button>
          <el-button type="primary" @click="recycleOrDeleteAllData" v-preventReClick>确 定</el-button>
        </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import {initSetMealHeadSelect, initAccountSelect,recycleBinCardList,getbalanceHeadSelect,recycleBinCardOperation} from '@/api/getData'
export default {
    data() {
        return {
            id: '',
            current: 1,
            pageSize: 10,
            total: 0,
            tableData: [],
            tableLoading: false,
            formDisabled: false,
            showAllBtn: false,
            dialogFormVisible: false,
            showSomeActDialog: false,
            form: {
                passage: '',          //通道
                mealType: '',         //套餐大类
                balancePackage: '',   //余额套餐
                startNo: null,        //起始卡号
                endNo: null,          //结束卡号
                cardsNo: '',          //不规则卡号
                remark: '',           //备注
            },
            rules: {
                startNo: [
                    {
                        validator: (rule, value, callback) => {
                            let endNo = this.$refs.endNo.value;
                            let reg = /^([1-9][0-9]{4,19})$/;
                            if (value && !reg.test(value)) callback('起始号段只能输入数字，长度在5-20位之间');
                            else if (value && reg.test(value) && !endNo) callback('请输入结束号段，长度在5-20位之间');
                            else if (endNo && !reg.test(endNo)) callback('结束号段只能输入数字，长度在5-20位之间');
                            else if (endNo && reg.test(endNo) && !value) callback('请输入起始号段，长度在5-20位之间');
                            else callback();
                        }, trigger: 'blur'
                    }
                ],
            },
            passageOptions: [],         //通道下拉列表
            mealTypeOptions: [],        //套餐大类列表
            balancePackageOptions: [],   //余额套餐列表
            typeValue: '',
            typeName: '',
            typeId: '',
            showText: '',
            pagekey:'',
        }
    },
    mounted() {
        this.id = this.$route.query.id?this.$route.query.id:'';
        this.innitMealData();
        this.innitAccountData();
        this.innitBalanceData();
        this.initData();
    },
    methods: {
        //全部还原 or 全部清空
        async doSomeAct(type, name){
            this.pagekey = await this.$getPageKey();
            this.typeValue = type;
            this.typeName = name;
            this.typeId = '';
            await this.initData();
            this.showText = `是否继续将当前表格内总计 ${this.total} 条数据进行 ${this.typeName} ?`
            this.showSomeActDialog = true;
            this.form.remark = '';
        },
        recycleOrDeleteAllData(){
            let textTip = `是否继续执行 ${this.typeName} 操作?`
            if(this.typeValue=='DELETE_CARD')textTip=`清空数据后不可恢复，是否继续执行 ${this.typeName} 操作?`
            this.$confirm(textTip, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let batchOpratorRecord = {};
                if(!this.typeId){
                    let setMealHeadId = this.form.mealType; //套餐大类
                    let balanceHeadId = this.form.balancePackage;//余额套餐
                    let accountId = this.form.passage;//通道类型
                    let oprationStatus = this.form.operationStatus;//操作状态
                    let oprationType = this.form.operationType;//操作状态
                    if (setMealHeadId == '0') setMealHeadId = '';
                    if (balanceHeadId == '0') balanceHeadId = '';
                    if (accountId == '0') accountId = '';
                    if (oprationType == '0') oprationType = '';
                    if (oprationStatus == '0') oprationStatus = '';


                    let dictOprationRule = '';
                    if(this.form.cardsNo||this.cardNoList)dictOprationRule = 'IRREGULAR_RULE';
                    let opratorCards = '';

                    if(this.cardNoList){
                        opratorCards = this.cardNoList
                    }
                    else if(this.form.cardsNo){
                        opratorCards = this.form.cardsNo
                    }
                    batchOpratorRecord = {
                        accountId: accountId,                 //通道ID
                        setMealHeadId: setMealHeadId,         //流量套餐大类ID
                        balanceHeadId: balanceHeadId,         //余额套餐大类ID
                        startCardNumber: this.form.startNo,   //起始卡号
                        endCardNumber: this.form.endNo,       //起始卡号
                        dictOprationRule: dictOprationRule,   //如果传不规则卡号则需要传他， IRREGULAR_RULE
                        opratorCards: opratorCards,           //不规则卡号字符串
                    }
                }

                let remark = this.form.remark?this.form.remark: '';
                batchOpratorRecord.cardRecycleBinLogRemark = remark;
                batchOpratorRecord.dictOprationType = this.typeValue;
                recycleBinCardOperation({
                    batchOpratorRecord,
                    id: this.typeId,
                    recycleBinLogId: this.id,
                    pagekey: this.pagekey
                }).then(res=>{
                    this.$confirm('数据已提交, 是否立即前往回收站操作记录查看结果?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$router.push({
                            path: '/recycleBinRecord'
                        })
                    }).catch(() => {
                        this.showSomeActDialog = false;
                        this.initData();
                    });
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });

        },
        //全部数据当前数据切换
        reviewAllData(){
            this.showAllBtn = !this.showAllBtn;
            this.initData()
        },
        //查询列表数据
        async initData(){
            let setMealHeadId = this.form.mealType; //套餐大类
            let balanceHeadId = this.form.balancePackage;//余额套餐
            let accountId = this.form.passage;//通道类型
            let oprationStatus = this.form.operationStatus;//操作状态
            let oprationType = this.form.operationType;//操作状态
            if (setMealHeadId == '0') setMealHeadId = '';
            if (balanceHeadId == '0') balanceHeadId = '';
            if (accountId == '0') accountId = '';
            if (oprationType == '0') oprationType = '';
            if (oprationStatus == '0') oprationStatus = '';

            let dictOprationRule = '';
            if(this.form.cardsNo||this.cardNoList)dictOprationRule = 'IRREGULAR_RULE';
            let opratorCards = '';

            if(this.cardNoList){
                opratorCards = this.cardNoList
            }
            else if(this.form.cardsNo){
                opratorCards = this.form.cardsNo
            }
            let id = !this.showAllBtn?this.id:'';
            let batchOpratorRecord = {
                accountId: accountId,                 //通道ID
                setMealHeadId: setMealHeadId,         //流量套餐大类ID
                balanceHeadId: balanceHeadId,         //余额套餐大类ID
                startCardNumber: this.form.startNo,   //起始卡号
                endCardNumber: this.form.endNo,       //起始卡号
                dictOprationRule: dictOprationRule,   //如果传不规则卡号则需要传他， IRREGULAR_RULE
                opratorCards: opratorCards,           //不规则卡号字符串
            }
            this.tableLoading = true;
            let returnData = await recycleBinCardList({
                batchOpratorRecord,
                recycleBinLogId:id,
                page:{
                    size:this.pageSize,
                    current:this.current
                }})
            this.tableData = [];
            this.total = 0;

            if(returnData.data.records && returnData.data.records.length>0){
                returnData.data.records.map(item=>{
                    this.tableData.push(item);
                })
                this.total = returnData.data.total;
            }
            this.tableLoading = false;

        },

        //清空当前卡
        async clearItem(row,type){
            this.typeValue = type;
            this.typeName = `清空当前卡（卡号：${row.cardNumber})`;
            this.showText = `是否继续将当前数据进行清空操作?`
            this.showSomeActDialog = true;
            this.typeId = row.id;
            this.pagekey = await this.$getPageKey();
        },
        //还原卡当前卡
        async revertItem(row,type){
            this.typeValue = type;
            this.typeName = `还原当前卡（卡号：${row.cardNumber})`;
            this.showText = `是否继续将当前数据进行还原操作?`
            this.showSomeActDialog = true;
            this.typeId = row.id;
            this.pagekey = await this.$getPageKey();
        },
        handleSizeChange(val){
            this.pageSize = val;
            this.current = 1;
            this.initData();
        },
        handleCurrentChange(val){
            this.current = val;
            this.initData();
        },
        toBack() {
            this.$router.back(-1);
        },
        searchForm(formName){
            this.$refs[formName].validate((valid)=>{
                if(valid){
                    this.initData();
                }
            })
        },
        resetForm(formName){
            this.form.endNo = '';
            this.$refs[formName].resetFields();
        },
        async innitMealData() {
            //套餐大类下拉
            const returnData1 = await initSetMealHeadSelect({});
            this.mealTypeOptions = [
                {value: '0', label: '请选择套餐大类'}
            ];
            if (returnData1._result) {
                for (let item of returnData1.data) {
                    const obj = {};
                    obj.value = item.id;
                    obj.label = item.name;
                    this.mealTypeOptions.push(obj)
                }
                this.form.mealType = '0';
            }
        },
        async innitAccountData() {
            //通道下拉
            const returnData2 = await initAccountSelect({});
            this.passageOptions = [
                {value: '0', label: '请选择通道'}
            ];
            if (returnData2._result) {
                for (let item of returnData2.data) {
                    let obj = {};
                    obj.value = item.id;
                    obj.label = item.accountName;
                    this.passageOptions.push(obj)
                }
                this.form.passage = '0';
            }
        },
        async innitBalanceData() {
            //余额套餐下拉
            const returnData3 = await getbalanceHeadSelect({});
            this.balancePackageOptions = [
                {value: '0', label: '请选择余额套餐'}
            ];
            if (returnData3._result) {
                for (let item of returnData3.data) {
                    let obj = {};
                    obj.value = item.id;
                    obj.label = item.headName;
                    this.balancePackageOptions.push(obj);
                }
                this.form.balancePackage = '0';
            }
        },
        saveCardsNo(){
            if(this.form.cardsNo){
                let arr = this.form.cardsNo.split('\n');
                this.form.cardsNo = '';
                arr.filter(s=>{
                    if(s&&s.trim())this.form.cardsNo += s + '\n';
                });
            }
            this.dialogFormVisible = false;
        },
    }
}
</script>

<style scoped>
.btn_input{
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    width: 200px;
    height: 38px;
    padding: 0 20px;
    border: 1px solid #DCDFE6;
    color: #67c23a;
    border-radius: 5px;
    background: #fff;
    transition: .1s;
    font-weight: 400;
    outline: none;
}
.btn_input:hover{
    border: 1px solid #67c23a;
    color: #67c23a;
}
.btn_input:active{
    border: 1px solid #67c23a;
    color: #67c23a;
}
.btn_look{
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    width: 200px;
    height: 38px;
    padding: 0 20px;
    border: 1px solid #DCDFE6;
    color: #1890ff;
    border-radius: 5px;
    background: #fff;
    transition: .1s;
    font-weight: 400;
    outline: none;
}
.btn_look:hover{
    border: 1px solid #1890ff;
    color: #1890ff;
}
.btn_look:active{
    border: 1px solid #1890ff;
    color: #1890ff;
}
</style>
